<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>部门管理</title>
  <!--引入的vue.js-->
  <script src="/js/vue.js"></script>
  <!--引入elementUI的css-->
  <link  type="text/css" rel="stylesheet" href="/css/index.css">
  <!--引入elementUI的js-->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app" class="app1">
  <!--布局-->
  <el-row>
    <el-col :span="6">
      <el-input v-model="searchForm.deptName1" placeholder="请输入部门名称"  size="small"></el-input>

    </el-col>
    <el-col :span="6">
      <el-input v-model="searchForm.loc1" placeholder="请输入部门位置"  size="small"></el-input>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" icon="el-icon-search" @click="searchData"  size="small">搜索</el-button>
      &nbsp;
      &nbsp;
      &nbsp;
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handlerAdd"  size="small">添加</el-button>
    </el-col>
    <el-col :span="6"></el-col>
  </el-row>

  <!--列表-->
  <el-table
          :data="tableData"
          style="width: 100%">
    <el-table-column
            prop="deptNo"
            label="编号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="deptName"
            label="部门名称"
            width="180">
    </el-table-column>
    <el-table-column
            prop="loc"
            label="位置">
    </el-table-column>
    <el-table-column label="操作">
      <!--使用槽进行父子组件传递参数-->
      <template slot-scope="scope">
        <!--scope.$index 当前行数据的序号   scope.row 当前行数据-->
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页  :相当于vue中v-bind 绑定属性  @相当于vue中v-on 绑定事件-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>

  <!--添加/修改对话框-->
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form1" :rules="rules1" ref="form1" >
      <el-form-item label="部门名称" :label-width="formLabelWidth"  prop="deptName">
        <el-input v-model="form1.deptName" autocomplete="off"></el-input>

      </el-form-item>
      <el-form-item label="位置" :label-width="formLabelWidth" prop="loc">
        <el-input v-model="form1.loc" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addOrUpdate('form1')">确 定</el-button>
    </div>
  </el-dialog>

</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [],//列表数据
        currentPage: 1, //第几页
        pageSize: 10, //每页显示数量
        total: 100,//分页数据的总数
        searchForm: {deptName1: '', loc1: ''}, //搜索form
        dialogFormVisible: false, //是否显示对话框  false不显示  如果改为true就显示
        form1: {
          deptName: '',//部门名称
          loc: ''  //部门位置
        },
        formLabelWidth: '120px', //label的宽度
        rules1: {
          deptName: [
            //required=true  输入框不能为null  message=提示信息  trigger 触发器 触发条件  blur 失去焦点  鼠标从输入框移开  change 改变
            { required: true, message: '请输入部门名称', trigger: 'blur' },
            //min=2   最小长度  max=10  最大长度
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          loc: [
            //required=true  输入框不能为null  message=提示信息  trigger 触发器 触发条件  blur 失去焦点  鼠标从输入框移开  change 改变
            { required: true, message: '请输入部门位置', trigger: 'blur' },
            //min=2   最小长度  max=8  最大长度
            { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
          ],

        },
        title: "部门添加",  //对话框的标题

      }
    },
    created() { //页面加载时执行
      this.loadData();
    },
    methods: { //html页面使用的所有函数/方法
      loadData() {
        let _this = this;
        // 向给定ID的用户发起请求
        axios.post('/dept/queryPage',{"pageNo":this.currentPage,"pageSize":this.pageSize,
          "data":{
            "deptName":this.searchForm.deptName1,
            "loc":this.searchForm.loc1
          }})
                .then(function (response) {
                  // 处理成功情况
                  console.log(response);
                  //JSON.stringify  json对象转字符串
                  console.log(JSON.stringify(response));
                  //请求成功判断
                  if(response.data.code==200){
                    _this.tableData=response.data.data.list;
                    _this.total = response.data.data.total;
                  }
                })
                .catch(function (error) {
                  // 处理错误情况
                  console.log(error);
                })
                .finally(function () {
                  // 总是会执行
                });
      },
      //每页数量发生变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        //让每页显示数量变化
        this.pageSize = val;
        //调用加载数据方法
        this.loadData();
      },
      //当前页码发生变化 第几页发生变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        //调用加载数据方法
        this.loadData();
      },
      //搜索功能
      searchData(){
        this.currentPage=1;
        //调用加载数据方法
        this.loadData();
      },
      //处理添加
      handlerAdd(){
        //给title标题赋值
        this.title = "部门添加";
        //让对话框显示
        this.dialogFormVisible = true;
        //清空表单数据
        this.form1={};
      },
      //添加或者更新
      addOrUpdate(formName){
        //this.$refs  固定用法   获取某一个元素 this.$refs[元素的名称]
        // validate 校验     =>   箭头函数    换java中  ->  lambda表达式
        this.$refs[formName].validate((valid) => {
          if (valid) { //校验成功
            //定义uri
            let uri = '/dept/add';
            //判断是添加还是更新
            if(this.title=="部门更新"){
              uri = '/dept/update';
            }
            //警告框
            //alert('submit!');
            //调用axios添加部门
            let _this = this;
            // 向给定ID的用户发起请求
            axios.post(uri,this.form1)
                    .then(function (response) {
                      // 处理成功情况
                      console.log(response);
                      //JSON.stringify  json对象转字符串
                      console.log(JSON.stringify(response));
                      //请求成功判断
                      if(response.data.code==200&&response.data.data>0){
                        //关闭对话框
                        _this.dialogFormVisible = false;
                        //提示信息
                        _this.$message({
                          message: '恭喜你，这是一条成功消息',
                          type: 'success'
                        });
                        //调用加载数据方法
                        _this.loadData();
                      }else {
                        //提示信息
                        _this.$message.error('错了哦，这是一条错误消息');
                      }
                    })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //处理更新
      handleEdit(index, row) {
        //console.log(index, row);
        //console.log(JSON.stringify(row));
        //为title赋值
        this.title = "部门更新";
        //让对话框显示
        this.dialogFormVisible = true;
        //JSON.stringify先把json对象转成json字符串，  再使用 JSON.parse把json字符串转json对象  相当于深克隆 把js对象重新来一个新的
        let row1 =  JSON.parse(JSON.stringify(row))
        //给form1赋值
        this.form1 = row1;
      },
      //删除
      handleDelete(index, row) {
        // console.log(index, row);
        //警告框，提示删除
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //调用axios删除部门
          let _this = this;
          // 向给定ID的用户发起请求
          axios.delete("/dept/deleteById?deptNo="+row.deptNo)
                  .then(function (response) {
                    // 处理成功情况
                    console.log(response);
                    //JSON.stringify  json对象转字符串
                    console.log(JSON.stringify(response));
                    //请求成功判断
                    if(response.data.code==200&&response.data.data>0){
                      //关闭对话框
                      _this.dialogFormVisible = false;
                      //提示信息
                      _this.$message({
                        message: '恭喜你，这是一条成功消息',
                        type: 'success'
                      });
                      //调用加载数据方法
                      _this.loadData();
                    }else {
                      //提示信息
                      _this.$message.error('错了哦，这是一条错误消息');
                    }
                  })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  })
</script>
</body>
</html>